import VisFieldNode from "@/types/VisFieldNode";
import React from "react";
import NodeBox from "./NodeBox";

export default function FieldNode(props: { fieldNode: VisFieldNode }) {
  const { fieldNode } = props;
  const modifiersDisplay = (
    <span>
      {/* bug from JavaParser：生成的modifiers自带空格，最后一个空格不显示。。 */}
      {fieldNode.modifiers.reduce((first, second) => first + second + "", "")}
      {fieldNode.modifiers.length > 0 ? "" : ""}
      &nbsp;
    </span>
  );
  const typeDisplay = (
    <span style={{ fontWeight: "bold" }}>{fieldNode.type}&nbsp;</span>
  );
  const identifierDisplay = (
    <span style={{ fontStyle: "italic" }}>{fieldNode.identifier}</span>
  );
  const displayName = (
    <>
      {modifiersDisplay}
      {typeDisplay}
      {identifierDisplay}
    </>
  );
  return (
    <NodeBox
      range={fieldNode.range}
      displayName={displayName}
      color="#90A4AE"
      titleTextColor="#424242"
      icon={<span className="iconfont icon-ziyuanshuxing"></span>}
    ></NodeBox>
  );
}
